<template>
  <div class="comment" ref="comment">
    <div class="hot" v-if="hotComments.length">
      <p>精彩评论</p>
      <div
        class="hotComments"
        v-for="(item, index) in hotComments"
        :key="index"
      >
        <img :src="item.user.avatarUrl" @click="user(item.user.userId)" />
        <div class="comment-content">
          <div class="comment-user">
            <span class="name">{{ item.user.nickname }}:</span>
            <span>{{ item.content }}</span>
          </div>
          <div
            class="beReplied comment-user"
            v-for="(item, index) in item.beReplied"
            :key="index"
          >
            <span class="name">@{{ item.user.nickname }}:</span>
            <span>{{ item.content }}</span>
          </div>
          <div class="comment-time">{{ item.time | unix2Time }}</div>
        </div>
      </div>
    </div>
    <p @click="go" class="more" v-if="hotComments.length">查看更多精彩评论></p>
    <div class="newcomments hot">
      <p>最新评论({{ total }})</p>
      <div class="hotComments" v-for="(item, index) in comments" :key="index">
        <img :src="item.user.avatarUrl" alt />
        <div class="comment-content">
          <div class="comment-user">
            <span class="name">{{ item.user.nickname }}:</span>
            <span>{{ item.content }}</span>
          </div>
          <div
            class="beReplied comment-user"
            v-for="(item, index) in item.beReplied"
            :key="index"
          >
            <span class="name">@{{ item.user.nickname }}:</span>
            <span>{{ item.content }}</span>
          </div>
          <div class="comment-time">{{ item.time | unix2Time }}</div>
        </div>
      </div>
    </div>
    <ul v-if="total > limit">
      <li v-if="offset == 1" class="dis bor">&lt;</li>
      <li v-else class="bor" @click="next(-1)">&lt;</li>
      <li @click="fenye(1)" :class="{ now: offset == 1 }">1</li>
      <li v-if="preClipped" class="fmore">...</li>
      <li
        :class="{ now: offset == item }"
        @click="fenye(item)"
        v-for="(item, index) in pages"
        :key="index"
      >
        {{ item }}
      </li>
      <li v-if="backClipped" class="fmore">...</li>
      <!-- <li class="fmore" v-if="ye>8">
        <span>...</span>
      </li>-->
      <li v-if="ye > 8" :class="{ now: offset == ye }" @click="fenye(ye - 1)">
        {{ ye }}
      </li>
      <li v-if="offset !== ye" @click="next(1)" class="bor">&gt;</li>
      <li v-else class="dis bor">&gt;</li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  mounted() {
    this.load = this.$loading.show();
    this.init();
  },
  activated() {
    document.getElementsByClassName("box")[0].scrollTop = this.scrollTop;
  },
  data() {
    return {
      hotComments: [],
      comments: [],
      total: "",
      pageNo: 1,
      offset: 1, //当前页数
      scrollTop: 0,
      ye: 0,
      limit: 60,
      preClipped: "",
      backClipped: "",
      pages: [],
      load: "",
    };
  },
  props: {
    songid: {},
    zj: Boolean,
  },
  computed: {
    fen() {
      return this.ye > 8 ? 8 : this.ye;
    },
    ...mapState(["showsongdetail"]),
  },
  methods: {
    next(index) {
      this.load = this.$loading.show();
      this.offset = this.offset + index;
      this.init();
      this.scrollTop = document.getElementsByClassName("comment")[0].offsetTop;
      this.showsongdetail
        ? null
        : (document.getElementsByClassName(
            "box"
          )[0].scrollTop = this.scrollTop);
    },
    init() {
      //界面打开
      var api = "getcomment";
      var id = this.$route.params.id;
      if (this.showsongdetail) {
        id = this.songid;
        api = "musicComment";
      } else if (this.zj) {
        id = this.songid;
        api = "albumcomment";
      }
      this.$api[api]({
        id,
        limit: this.limit,
        offset: (this.offset - 1) * this.limit,
      }).then((res) => {
        this.hotComments = res.hotComments || [];
        this.comments = res.comments;
        this.total = res.total;
        this.ye = Math.ceil(parseFloat(res.total / this.limit)); //parseInt(res.total / this.limit)
        this.pages = this.pagess();
        this.load.hide();
      });
    },
    go() {
      //详情打开了
      var id = this.$route.params.id;
      var type = 2;
      if (this.showsongdetail) {
        this.$store.commit("showsong");
        id = this.songid; //songContent
        this.scrollTop = document.getElementsByClassName(
          "songContent"
        )[0].scrollTop;
        type = 0;
      } else {
        this.scrollTop = document.getElementsByClassName("box")[0].scrollTop;
      }
      const path = "/hot/" + id + "/" + type;
      this.$route.path !== path &&
        this.$router.push({ path: "/hot/" + id + "/" + type });
    },
    fenye(index) {
      if (this.offset == index) return;
      this.load = this.$loading.show();
      this.offset = index;
      this.init();
      this.scrollTop = document.getElementsByClassName("comment")[0].offsetTop;
    },
    pagess() {
      let ret = [];
      if (this.offset >= 9) {
        // 当前页码大于8时，显示当前页码的前3个
        ret.push(this.offset - 3);
        ret.push(this.offset - 2);
        ret.push(this.offset - 1);
        ret.push(this.offset);
        if (this.offset > 5) {
          // 当前页与第一页差距5以上时显示省略号
          this.preClipped = true;
        }
      } else {
        this.preClipped = false;
        for (let i = 2; i <= 8; i++) {
          ret.push(i);
        }
      }
      if (this.offset < this.ye - 2) {
        if (this.offset >= 8) {
          // 显示当前页码的后2个
          ret.push(this.offset + 1);
          ret.push(this.offset + 2);
        }
        if (this.offset <= this.ye - 3) {
          // 当前页与最后一页差距3以上时显示省略号;
          this.backClipped = true;
        }
      } else {
        this.backClipped = false;
        for (let i = this.offset + 1; i < this.ye; i++) {
          ret.push(i);
        }
      }
      return ret;
    },
    user(id) {
      this.$router.push("/user/" + id);
    },
  },
};
</script>
<style lang="less" scoped>
.comment {
  padding: 10px 20px;
  .hot {
    font-size: 14px;
    margin-top: 10px;
    p {
      font-size: 14px;
      border-bottom: 1px solid #e1e1e2;
      padding-bottom: 10px;
    }
    .hotComments {
      display: flex;
      margin-top: 5px;
      padding-bottom: 5px;
      position: relative;
      border-bottom: 1px solid #e1e1e2;
      padding: 10px 0;
      &:last-child {
        border-bottom: none;
      }
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 1px solid #e1e1e2;
        vertical-align: top;
        cursor: pointer;
      }
      .comment-content {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        .comment-user {
          letter-spacing: 1px;
          font-size: 14px;
          .name {
            color: cornflowerblue;
          }
        }
        .beReplied {
          background-color: #f1f1f4;
          color: #666;
          margin-top: 5px;
          padding: 10px 0 10px 5px;
        }
        .comment-time {
          margin-top: 5px;
          color: #a599b1;
        }
      }
    }
  }
  .more {
    color: #666;
    font-size: 13px;
    text-align: center;
    border-top: 1px solid #e1e1e2;
    padding: 20px 0;
    &:hover {
      color: #444;
    }
  }
  ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    li {
      width: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      font-size: 12px;
      cursor: pointer;
      margin: 0 5px;
      &:hover {
        background-color: #ecedf1;
        border: 1px solid #e1e1e2;
        color: black;
        font-weight: 550;
      }
    }
    .now {
      color: #c62f2f;
      text-decoration: underline;
      padding: 1px;
      &:hover {
        background-color: #fff;
        border: none;
        color: #c62f2f;
        font-weight: normal;
        cursor: default;
      }
    }
    .fmore {
      line-height: 10px;
      span {
        margin-top: -5px;
      }
      &:hover {
        background-color: #fff;
        border: none;
        color: #666;
        cursor: default;
        font-weight: normal;
      }
    }
    .bor {
      border: 1px solid #e1e1e2;
      color: #666;
      font-size: 16px;
      &:hover {
        color: #666;
        font-weight: normal;
      }
    }
    .dis {
      color: #ccc;
      cursor: default;
      font-size: 16px;
      &:hover {
        background-color: #fff;
        color: #ccc;
      }
    }
  }
}
</style>
